<template>
  <div>
    <CustomDialog
        :title="state.dialog.title"
        v-model:visible="state.dialog.isShowDialog"
        dialogWidth="900px"
        @close="closeDialog"
        :dialogFooterBtn="true"
    >
      <el-form :model="state.ruleForm" ref="commentRef" label-width="100px">
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="操作人" prop="operator">
              <el-input v-model="state.ruleForm.operator" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="接口地址">
              <el-input v-model="state.ruleForm.url" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="执行状态">
              <el-select v-model="state.ruleForm.status" style="width: 100%" disabled>
                <el-option value="fail" label="失败"></el-option>
                <el-option value="success" label="成功"></el-option>
                <el-option label="未知"></el-option>
              </el-select>
              <!--							<el-input v-model="state.ruleForm.status"></el-input>-->
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="请求ip">
              <el-input v-model="state.ruleForm.clientIp" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="服务ip">
              <el-input v-model="state.ruleForm.localIp" disabled></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="操作分类" prop="operator">
              <el-input v-model="state.ruleForm.operationType" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="接口来源" prop="operator">
              <!--              <el-input v-model="state.ruleForm.source"></el-input>-->

              <el-select v-model="state.ruleForm.source" style="width: 100%" disabled>
                <el-option value="server" label="管理端"></el-option>
                <el-option value="client" label="客户端"></el-option>
                <el-option label="未知"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="操作" prop="operator">
              <el-input v-model="state.ruleForm.createTime" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="处理耗时" prop="operator">
              <el-input v-model="state.ruleForm.costTime" disabled>
                <template #append>毫秒</template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="请求头" prop="operator">
              <el-input v-model="state.ruleForm.header" type="textarea" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="操作内容">
              <el-input v-model="state.ruleForm.msg" type="textarea" disabled/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="请求体">
              <el-input v-model="state.ruleForm.requestBody" type="textarea" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </CustomDialog>
  </div>
</template>

<script setup lang="ts">
import {reactive} from 'vue';
import {ActionLogApi} from '/@/api/log/action';
import messageUtils from '/@/utils/messageUtils';

const state = reactive({
  ruleForm: {
    operator: '',
    msg: '',
    requestBody: '',
    url: '',
    status: '',
    clientIp: '',
    localIp: '',
    header: '',
    createTime: '',
    operationType: '',
    costTime: '',
    source: '',
  },
  dialog: {
    isShowDialog: false,
    type: '',
    title: '行为日志',
    submitTxt: '',
  },
});

const closeDialog = () => {
  console.log('关闭窗口');
  state.dialog.isShowDialog = false;
};

const openDialog = async (id: string) => {
  state.dialog.isShowDialog = true;
  try {
    const {data} = await ActionLogApi().view(id);
    state.ruleForm = data;
  } catch (e) {
    messageUtils().error('操作失败');
  }
};

defineExpose({openDialog});
</script>

<style scoped lang="scss"></style>
